<template>
  <!-- 添加或修改首页轮播图对话框 -->
  <el-dialog :title="title" @close="cancel" 
    :visible.sync="open" width="500px" append-to-body>
    <el-form ref="form" class="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="轮播图" prop="picUrl">
        <oss v-model="form.picUrl"
        :limit="1"
        @input="(val) => form.picUrl = val"
        ossURL="/oss/uploadBanner"
        />
      </el-form-item>
      <el-form-item label="启用状态" prop="enabled">
        <el-switch v-model="form.enabled" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import rules from '@/rules/banner'
import { addBanner } from '@/api/banner/banner'

export default {
  props: {
    // 是否显示弹出层
    open: {
      type: Boolean,
      default: false
    },
    // 弹出层标题
    title: {
      type: String,
      default: ''
    }
  },

  components: {
    oss: () => import('@/components/ImageUpload/oss.vue')
  },

  data() {
    return {
      form: {
        enabled: undefined,
        picUrl: undefined
      },
      rules
    }
  },

  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        addBanner(this.form).then((response) => {
          this.$modal.msgSuccess('新增成功')
         
          this.reset();

          this.$emit('close', false);
        })
      })
    },
    // 取消按钮
    cancel() {
      this.reset()
      this.$emit('close', false);
      
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        picUrl: null,
        enabled: null,
        createTime: null,
        updateTime: null
      }
      this.resetForm('form')
    }
  }
}
</script>

<style>
.form .el-upload-dragger {
    width: 150px;
    height: 150px;
}
</style>
